I am writing a custom Firefox extension and even though my manifest.json has the appropriate tag for including a CSS file, it is not being rendered.

If I inspect the web page, the css file isn't in the HTML Header nor can I find it in the Style editor.

How do I correctly add the CSS file?

Directory Structure

.
├── blackthorn_tools.js
├── help.txt
├── icons
│   └── major-48.png
├── manifest.json
└── styles.css

This is my manifest.json:

{

  "manifest_version": 2,
  "name": "blackthorn_tools",
  "version": "1.0",

  "icons": {
    "48": "icons/major-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "css": ["./styles.css"],
      "js": ["./blackthorn_tools.js"]
    }
  ],
    "browser_specific_settings": {
    "gecko": {
      "id": "blackthorn_tools@example.com"
    }
}
}